<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jQuery/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/product_list.css">
</head>
<body>
<div class="top">
    <div class="top-log">
        <div class="logo">
            <a href="index.html"><img src="${pageContext.request.contextPath}/images/xianyu.jpg" width="90" height="40"></a>
        </div>
    </div>
    <div class="top-dingwei">
        <div class="top-dingwei-main">
            <ul>
                <li class="top-dingwei-img"><img src="${pageContext.request.contextPath}/images/dingwei.png"></li>
                <li class="top-dingwei-city"><a href="#">深圳<p class="top-dingwei-jiantou"></p></a></li>
            </ul>
        </div>
    </div>

    <!--============================搜索=====================================-->
    <div class="search-btn">
        <form onSubmit="submitFn(this, event);">
            <div class="search-wrapper">
                <div class="input-holder">
                    <input type="text" class="search-input" placeholder="请输入关键词" />
                    <button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>
                </div>
                <span class="close" onClick="searchToggle(this, event);"></span>
            </div>
        </form>
    </div>
    <!--=======================购物车==========================-->
    <div class="cart">
        <dl>
            <dt class="shopping-btn">
                <a href="">
                    <b class="totlePrice">￥2020.00</b>
                </a>
            </dt>
            <dd class="shopping-list" style="">
                <div class="spacer"></div>
                <div class="nogoods" style="display: none">
                    购物车中还没有商品，赶紧选购吧!
                </div>
                <div class="goods">
                    <ul>
                        <li>
                            <div class="l">
                                <a href="">
                                    <img src="${pageContext.request.contextPath}images/cart1.jpg" width="42" height="42">
                                </a>
                            </div>
                            <div class="c">
                                <a href="">
                                    PAMPERO乌拉那拉去骨冷冻安格斯谷饲薄群肉牛排150g
                                </a>
                            </div>
                            <div class="r">
                                <b>￥39.90</b>
                                *3
                                <a href="" onclick="">删除</a>
                            </div>
                        </li>
                        <li>
                            <div class="l">
                                <a href="">
                                    <img src="${pageContext.request.contextPath}images/cart1.jpg" width="42" height="42">
                                </a>
                            </div>
                            <div class="c">
                                <a href="">
                                    PAMPERO乌拉那拉去骨冷冻安格斯谷饲薄群肉牛排150g
                                </a>
                            </div>
                            <div class="r">
                                <b>￥39.90</b>
                                *3
                                <a href="" onclick="">删除</a>
                            </div>
                        </li>
                    </ul>
                    <div class="price-total">
                        <div>
                            <span class="totleNum">
                                共
                                <b>6</b>
                                件商品
                            </span>
                            <span class>
                                共计
                                <b class="totlePrice">￥120.00</b>
                            </span>
                        </div>
                    </div>
                </div>
            </dd>
        </dl>
    </div>

    <!--=======================我的====================================-->
    <div class="top-menu">
        <div class="login">
            <p>
                <a href="">登录/</a>
                <a href="">注册</a>
            </p>
        </div>
        <div class="user">
            <ul>
                <li class=" tle">
                    <a class="geren" href=""><img src="${pageContext.request.contextPath}images/geren-logo.png"></a>
                    <a href="">我的咸鱼</a>
                </li>
                <li class="e1">
                    <a class="order" href=""><img src="${pageContext.request.contextPath}images/order-logo.png"></a>
                    <a href=" ">我的订单</a>
                </li>
                <li class="e2">
                    <a class="coupon" href=""><img src="${pageContext.request.contextPath}images/coupon.png"></a>
                    <a href="">我的优惠券</a>
                </li>
                <li class="last">
                    <a class="exit" href=""><img src="${pageContext.request.contextPath}images/exit.png"></a>
                    <a href="">退出账户</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    <div class="header">
        <ul class="product-class">
            <li class="product-fl"><a href="">全部商品分类</a> </li>
            <li><a href="">果分区</a> </li>
            <li><a href="">蔬菜分区</a> </li>
            <li><a href="">鱼分区</a> </li>
            <li><a href="">肉类分区</a> </li>
            <li><a href="">菜单</a> </li>
        </ul>
    </div>

    <div class="products-list">
        <ul class="products">
            <c:forEach items="${productVOS}" var="productVO">
                <li>
                    <a href="${pageContext.request.contextPath}/product/${productVO.product.productId}" class="pro-img">
                        <img src="${pageContext.request.contextPath}images/${productVO.productImages.productImageId}">
                    </a>
                    <a href="" class="pro-desc">
                        <span>>${productVO.product.productName}</span>
                    </a>
                    <div class="pro-car"><a href="">加入购物车</a> </div>
                    <div class="price-cart">
                        <span class="pro-price">￥</span>
                        <span class="pro-price">${productVO.product.productPrice}</span>
                    </div>
                </li>
            </c:forEach>
            <%--<li>--%>
                <%--<a href="" class="pro-img">--%>
                <%--<img src="${pageContext.request.contextPath}images/pingguo.jpg">--%>
               <%--</a>--%>
                <%--<a href="" class="pro-desc">--%>
                    <%--<span>山东蓬莱红富士苹果9个约200g/个</span>--%>
                <%--</a>--%>
                <%--<div class="pro-car"><a href="">加入购物车</a> </div>--%>
                <%--<div class="price-cart">--%>
                <%--<span class="pro-price">￥</span>--%>
                <%--<span class="pro-price">49.00</span>--%>
                <%--</div>--%>
            <%--</li>--%>
            <%--<li>--%>
                <%--<a href="" class="pro-img">--%>
                    <%--<img src="${pageContext.request.contextPath}images/pingguo.jpg">--%>
                <%--</a>--%>
                <%--<a href="" class="pro-desc">--%>
                    <%--<span>山东蓬莱红富士苹果9个约200g/个</span>--%>
                <%--</a>--%>
                <%--<div class="pro-car"><a href="">加入购物车</a> </div>--%>
                <%--<div class="price-cart">--%>
                    <%--<span class="pro-price">￥</span>--%>
                    <%--<span class="pro-price">49.00</span>--%>
                <%--</div>--%>


            <%--</li>--%>
            <%--<li>--%>
                <%--<a href="" class="pro-img">--%>
                    <%--<img src="${pageContext.request.contextPath}images/pingguo.jpg">--%>
                <%--</a>--%>
                <%--<a href="" class="pro-desc">--%>
                    <%--<span>山东蓬莱红富士苹果9个约200g/个</span>--%>
                <%--</a>--%>
                <%--<div class="pro-car"><a href="">加入购物车</a> </div>--%>
                <%--<div class="price-cart">--%>
                    <%--<span class="pro-price">￥</span>--%>
                    <%--<span class="pro-price">49.00</span>--%>
                <%--</div>--%>


            <%--</li>--%>
            <%--<li>--%>
                <%--<a href="" class="pro-img">--%>
                    <%--<img src="${pageContext.request.contextPath}images/pingguo.jpg">--%>
                <%--</a>--%>
                <%--<a href="" class="pro-desc">--%>
                    <%--<span>山东蓬莱红富士苹果9个约200g/个</span>--%>
                <%--</a>--%>
                <%--<div class="pro-car"><a href="">加入购物车</a> </div>--%>
                <%--<div class="price-cart">--%>
                    <%--<span class="pro-price">￥</span>--%>
                    <%--<span class="pro-price">49.00</span>--%>
                <%--</div>--%>


            <%--</li>--%>
            <%--<li>--%>
                <%--<a href="" class="pro-img">--%>
                    <%--<img src="${pageContext.request.contextPath}images/pingguo.jpg">--%>
                <%--</a>--%>
                <%--<a href="" class="pro-desc">--%>
                    <%--<span>山东蓬莱红富士苹果9个约200g/个</span>--%>
                <%--</a>--%>
                <%--<div class="pro-car"><a href="">加入购物车</a> </div>--%>
                <%--<div class="price-cart">--%>
                    <%--<span class="pro-price">￥</span>--%>
                    <%--<span class="pro-price">49.00</span>--%>
                <%--</div>--%>


            <%--</li>--%>
            <%--<li>--%>
                <%--<a href="" class="pro-img">--%>
                    <%--<img src="${pageContext.request.contextPath}images/pingguo.jpg">--%>
                <%--</a>--%>
                <%--<a href="" class="pro-desc">--%>
                    <%--<span>山东蓬莱红富士苹果9个约200g/个</span>--%>
                <%--</a>--%>
                <%--<div class="pro-car"><a href="">加入购物车</a> </div>--%>
                <%--<div class="price-cart">--%>
                    <%--<span class="pro-price">￥</span>--%>
                    <%--<span class="pro-price">49.00</span>--%>
                <%--</div>--%>


            <%--</li>--%>
            <%--<li>--%>
                <%--<a href="" class="pro-img">--%>
                    <%--<img src="${pageContext.request.contextPath}images/pingguo.jpg">--%>
                <%--</a>--%>
                <%--<a href="" class="pro-desc">--%>
                    <%--<span>山东蓬莱红富士苹果9个约200g/个</span>--%>
                <%--</a>--%>
                <%--<div class="pro-car"><a href="">加入购物车</a> </div>--%>
                <%--<div class="price-cart">--%>
                    <%--<span class="pro-price">￥</span>--%>
                    <%--<span class="pro-price">49.00</span>--%>
                <%--</div>--%>


            <%--</li>--%>


        </ul>

    </div>


</div>
<div class="footer">
    <div class="wrap">
        <div class="s1">
            <img src="${pageContext.request.contextPath}images/quanqiu.png">
            <b>全球精选</b>
            <span>一站式生鲜购物方案</span>
        </div>
        <div class="s2">
            <img src="${pageContext.request.contextPath}images/cangku.png">
            <b>多仓直发</b>
            <span>次日达配送服务</span>
        </div>
        <div class="s3">
            <img src="${pageContext.request.contextPath}images/jingxuan.png">
            <b>品质严选</b>
            <span>精选正宗品质好食材</span>
        </div>
        <div class="s4">
            <img src="${pageContext.request.contextPath}images/gouwu.png">
            <b>天天低价</b>
            <span>会员专属优惠购不停</span>
        </div>


    </div>

</div>

</body>
</html>